<template>
	<div class="switch">
		<div
			class="inactiveText"
			:style="[
				{
					color: !modelValue ? inactiveColor : '#333',
				},
			]"
		>
			<slot name="inactiveText"></slot>
		</div>
		<u-switch v-model="modelValue" :active-color="activeColor" :active-value="activeValue" :inactive-value="inactiveValue" :inactive-color="inactiveColor" :size="35" @change="changeSwitch" :disabled="disabled"></u-switch>
		<div
			class="activeText"
			:style="[
				{
					color: modelValue ? activeColor : '#333',
				},
			]"
		>
			<slot name="activeText"></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: "vSwitch",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [String, Number, Boolean],
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		activeColor: {
			type: String,
			default: "",
		},
		inactiveColor: {
			type: String,
			default: "",
		},
		activeText: {
			type: String,
			default: "",
		},
		inactiveText: {
			type: String,
			default: "",
		},
		activeValue: {
			type: [String, Number, Boolean],
			default: true,
		},
		inactiveValue: {
			type: [String, Number, Boolean],
			default: false,
		},
	},
	data() {
		return {}
	},
	methods: {
		changeSwitch(val) {
			this.modelValue = val
			this.$emit("update:value", val)
		},
	},

	components: {},

	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.switch {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10rpx;
	.switch-item {
		transform: scale(0.7);
	}
}
</style>
